<template>
	<view >
	<my-search>
	</my-search>
	<view class="cate_contain" :style="{height: ableHeight + 'px'}">
		<scroll-view scroll-y="true" class="scoll_left">
			<!-- <view class="scoll_left_item active">xxx</view> -->
			<view v-for="(item, i) in cateList" :key="i" :class="['scoll_left_item',i === active?'active':'']"
			@click="setActiveSwich(i)"
			>{{item.cat_name}}</view>

		</scroll-view>
		<scroll-view scroll-y="true" class="scoll_right" :scroll-top="scroll">
			<view v-for="(item, i) in cateList[active].children" :key="i" class="scoll_right_item">
				<text class="sec_item">{{item.cat_name}}</text>
				<view class="lv3_item">
					<view class="child_item" v-for="(item2, i2) in item.children" :key="i2" @click="goToGoodsList(item2)">
						<image :src="item2.cat_icon" mode="widthFix"></image>
						<text>{{item2.cat_name}}</text>
					</view>			
				</view>
			</view>
		</scroll-view>
	</view>
		
	</view>
</template>

<script>
	import badgeMix from '@/mixins/tabbar-badge.js'
	export default {
		  mixins: [badgeMix],
		data() {
			return {
				ableHeight:0,
				active:0,
				cateList:[],
				scroll:0
			};
		},
		methods:{
			getWindowHeight(){
				const res = uni.getWindowInfo()
				this.ableHeight = res.windowHeight - 50
			},
			setActiveSwich(i){
				this.active = i
				this.scroll = this.scroll ? 0 : 1
			},
			async getCateList(){
				const {data: message} = await uni.$http.get('/api/public/v1/categories')
				if(message.meta.status !== 200) return uni.$showMsg()
				this.cateList = message.message
				console.log(message)
			},
			goToGoodsList(item2){
				uni.navigateTo({
					url:'/subpkg/goods_list/goods_list?id=' + item2.cat_name
				})
			}
		},
		onLoad() {
			this.getWindowHeight(),
			this.getCateList()
		}
	}
</script>

<style lang="scss">
.cate_contain{
	display: flex;
	text-align: center;
	.scoll_left{
		width: 120px;
		.scoll_left_item{
			line-height:60px;
			font-size: 12px;
			background-color: #f7f7f7;
			border-right: 1px #e1e1e1 solid;
			border-bottom: 1px #e1e1e1 solid;
			&.active{
				background-color: #ffffff;
				position: relative;
				&::before{
					content: ' ';
					display: block;
					width: 3px;
					height: 30px;
					background-color: #c00000;
					position: absolute;
					top: 50%;
					transform: translate(0,-50%);
				}
			}
		}
	}
	.scoll_right{
		.scoll_right_item{
		.sec_item{
			  font-size: 12px;
			  font-weight: bold;
			  text-align: center;
			  padding: 15px 0;
			  text-align: center;
		}
		.lv3_item{
			display: flex;
			flex-wrap: wrap;
			margin: 15px 0;
			  .child_item{
				  display: flex;
				  flex-wrap: wrap;
				  flex-direction: column;
				  justify-content: center;
				  align-items: center;
				  width: 33.33%;
				  padding: 10px 0;
				  image{
					  width: 60px;
				  }
				  text{
					  font-size: 12px;
				  }
			  }
		}
			
		}
	}
}
</style>
